<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- <script src="js/echarts.min.js"></script> -->
  <script src="js/echarts.js"></script>
  <script src="assets/index.js"></script>
  <script src="assets/shandong.js"></script>
  <title></title>
</head>

<body>
  <div id="main" style="width: 932px;height: 555px;"></div>
  <script>
    var myChart = echarts.init(document.getElementById('main'));
    $.get('css/map.json', function (geoJson) {
      echarts.registerMap('sc', geoJson, {});
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (p / km2)'
        },
        visualMap: {
          min: 500,
          max: 50000,
          text: ['High', 'Low'],
          right: "10%",
          bottom: "5%",
          realtime: false,
          calculable: false,
          padding: 0,
          textStyle: {
            color: "#fff"
          },
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [{
          name: '西城',
          type: 'map',
          mapType: 'sc',
          aspectScale: 0.85, //地图长度比
          zoom: 1.15,
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: '#57A0B9',
              areaColor: "#073D65"
            },
            emphasis: {
              areaColor: "#013159",
              borderWidth: 2,
              borderColor: '#57A0B9',
            }
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: [{
            name: '商河县',
            value: 5000
          }, {
            name: "济阳区",
            value: 1000
          }, {
            name: "天桥区",
            value: 100
          }, {
            name: "槐荫区",
            value: 10000
          }, {
            name: "历下区",
            value: 10541
          }, {
            name: "历城区",
            value: 32515
          }, {
            name: "市中区",
            value: 50000
          }, {
            name: "长清区",
            value: 30000
          }, {
            name: "平阴县",
            value: 3000
          }, {
            name: "章丘区",
            value: 25000
          }, {
            name: "莱芜区",
            value: 13520
          }, {
            name: "钢城区",
            value: 22210
          }]
        }]
      };
      myChart.setOption(option);
    });
  </script>
</body>

</html>
